<template>
  <div class="calender-container">
    <div class="calender-title">
      <span>工作计划提醒</span>
      <el-button class="btn" v-if="dailyReport.length !== 0"
                 @click="conferDailyReport">确定</el-button>
    </div>
    <div class="cc-calendar">
      <ul class="calendar-view clear">
        <li v-for="(item, index) in visibleCalendar" :key="index" class="date-view"
            :class="[
              {todayBg: isCurrentDay(item.date)},
              {handleDay: item.clickDay}]"
            @click="handleClickDay(item)">
          <span class="date-day" :style="dayStyle"
                :class="[{'opacity-class': !isCurrentMonth(item.date)}]">
            {{item.day}}
            <div v-if="isCurrentDay(item.date)||item.clickDay" class="weekDay">
              {{week[item.weekDay]}}
            </div>
          </span>
        </li>
      </ul>
      <ul class="calendar-week clear">
        <li v-for="(item, index) in calendarTitleArr" :key="index" class="week-item">{{item}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import '@/assets/scss/reset.min.css'
import * as utils from '@/assets/js/utils.js'
import request from '@/network/request'
export default {
  name: 'datePicker',
  props: {
    options: Object
  },
  data () {
    const { year, month, day } = utils.getNewDate(new Date())
    return {
      headOptions: {
        type: this.options.type,
        style: this.options.headStyle,
        date: ''
      },
      calendarTitleArr: ['日', '一', '二', '三', '四', '五', '六'],
      week: ['MON', 'TUE', 'WEN', 'THU', 'FRI', 'SAT', 'SUN'],
      time: { year, month, day },
      calendarList: [],
      dailyReport: []
    }
  },
  computed: {
    dayStyle: function () {
      return {
        textAlign: this.options.viewStyle.day
      }
    },
    visibleCalendar () {
      var that = this
      const calendatArr = []
      const { year, month } = utils.getNewDate(utils.getDate(this.time.year, this.time.month, 1))

      const currentFirstDay = utils.getDate(year, month, 1)
      // 获取当前月第一天星期几
      const weekDay = currentFirstDay.getDay()
      const startTime = currentFirstDay - (weekDay) * 24 * 60 * 60 * 1000
      let monthDayNum
      if (weekDay === 5 || weekDay === 6) {
        monthDayNum = 42
      } else {
        monthDayNum = 35
      }
      for (let i = 0; i < monthDayNum; i++) {
        calendatArr.push({
          date: new Date(startTime + i * 24 * 60 * 60 * 1000),
          year: year,
          month: month + 1,
          weekDay: new Date(startTime + i * 24 * 60 * 60 * 1000).getDay(),
          day: new Date(startTime + i * 24 * 60 * 60 * 1000).getDate(),
          clickDay: false
        })
      }
      that.headOptions.date = `${utils.englishMonth(month)} ${year}`
      return calendatArr
    }
  },
  inject: ['reload'],
  methods: {
    // 确认日报
    conferDailyReport () {
      const qs = require('qs')
      const list = []
      for (let i = 0; i < this.dailyReport.length; i++) {
        list[i] = this.dailyReport[i].subid
      }
      request({
        url: 'notice/conferregnotice',
        method: 'post',
        params: {
          randomID: JSON.parse(window.localStorage.getItem('user')).value.userId,
          list
        },
        paramsSerializer: params => {
          return qs.stringify(params, { arrayFormat: 'repeat' })
        }
      }).then(() => {
        this.reload()
      })
    },
    // 获取日报
    loadTable () {
      var _this = this
      request({
        url: 'notice/getnotices',
        method: 'post',
        params: {
          randomID: JSON.parse(window.localStorage.getItem('user')).value.userId
        }
      }).then(res => {
        const tableContent = res.data.data
        _this.dailyReport = tableContent.daily === null ? [] : tableContent.daily
      })
    },
    // 是否是当前月
    isCurrentMonth (date) {
      const { year: currentYear, month: currentMonth } = utils.getNewDate(utils.getDate(this.time.year, this.time.month, 1))
      const { year, month } = utils.getNewDate(date)
      return currentYear === year && currentMonth === month
    },
    // 是否是今天
    isCurrentDay (date) {
      const { year: currentYear, month: currentMonth, day: currentDay } = utils.getNewDate(new Date())
      const { year, month, day } = utils.getNewDate(date)
      return currentYear === year && currentMonth === month && currentDay === day
    },
    // 点击某一天
    handleClickDay (item) {
      this.$forceUpdate()
      this.$emit('handleClickDay', item)
      this.calendarList.map(x => {
        x.clickDay = false
      })
      this.$set(item, 'clickDay', true)
    }
  },
  created () {
    this.calendarList = this.visibleCalendar
    this.calendarType = this.options.calendarType
    this.loadTable()
  }
}
</script>

<style lang="less">
  .calender-container {
    width: 100%;
    height: 100%;
    background-color: RGB(14,16,54);
  }
  .calender-title {
    padding: 20px 20px 0 20px;
    height: 10%;
    background-color: RGB(44, 57, 95);
    span {
      font-size: 1.6em;
    }
    .btn {
      float: right;
      background-color: RGB(37, 68, 119);
      color: white;
      text-align: center;
      font-size: 1em;
      margin-top: -2.4%;
    }
  }
  .cc-calendar {
    padding: 20px 30px 0 30px;
    width: 100%;
    height: 80%;
    box-sizing: border-box;
    .calendar-view {
      width: 100%;
      height: 83%;
      .date-view {
        float: left;
        width: 14.285%;
        height: 20%;
        cursor: pointer;
        .date-day {
          padding-top: 40%;
          display: block;
          width: 100%;
          font-size: 1em;
          color: #EEEEEE;
        }
      }
      .opacity-class {
        opacity: .5;
      }
      .todayBg {
        background:
          -webkit-linear-gradient(
            bottom,
            hsla(0,0%,59%,.15),#FF336D
          ) no-repeat;
        box-shadow:
          -10px 0 20px RGB(14,16,54), /*左边阴影*/
          0 -10px 20px RGB(14,16,54), /*上边阴影*/
          10px 0 20px RGB(14,16,54),  /*右边阴影*/
          0 10px 20px RGB(14,16,54);  /*下边阴影*/
        .date-day {
          color: white;
          font-weight: bolder;
          padding-top: 26%;
          .weekDay {
            font-size: 0.8em;
          }
        }
      }
      .handleDay {
        background:
          -webkit-linear-gradient(
            bottom,
            hsla(0,0%,59%,.15),#3366FF
          ) no-repeat;
        .date-day {
          color: white !important;
          padding-top: 26%;
          .weekDay {
            font-size: 0.8em;
          }
        }
        .calendar-num {
          color: #fff !important;
        }
      }
    }
    .calendar-week {
      width: 100%;
      height: 17%;
      line-height: 46px;
      .week-item {
        float: left;
        width: 14.285%;
        text-align: center;
        font-size: 1em;
        color: #626973;
        border-top: 1px solid #424953;
        font-weight: 600;
      }
    }
  }
</style>
